iT邦幫忙

css secrets相關文章
共有 28 則文章
鐵人賽 Modern Web DAY 30
CSS Secrets 導讀 系列 第 30

技術 Secret 24: 合字

Ligature中文叫「合字」,在中文裡比較少見,它的介紹請見維基百科. Ligatures在網頁字型不常用到,但是用了它會讓排版比較好看,以前要實現ligat...

鐵人賽 Modern Web DAY 29
CSS Secrets 導讀 系列 第 29

技術 Secret 23: 調整 TAB 的寬度

在需要呈現程式碼的網頁,我們會用<pre>和<code>寫。但是瀏覽器有對程式碼區塊預設的樣式,這時會遇到一個問題,就是預設對於程式碼t...

鐵人賽 Modern Web DAY 28
CSS Secrets 導讀 系列 第 28

技術 Secret 22: 斑馬條紋

幾年前當我們開始可以用:nth-child()/:nth-of-type()這類的CSS虛擬類別(pseudo-class)時,最常用來做「斑馬條紋的table...

鐵人賽 Modern Web DAY 27
CSS Secrets 導讀 系列 第 27

技術 Secret 21: 用CSS換行

需要用CSS換行的時機通常是在使用definition lists的時候,但有時在其他的場合也會有同樣需求。會使用definition lists因為我們想做一...

鐵人賽 Modern Web DAY 26
CSS Secrets 導讀 系列 第 26

技術 Secret 19: 折角效果2

其他角度的折角 前面我們做了45度的折角,但現實的折角並不會剛好都45度,如果要模擬得更為真實,我們可以試試看其他的角度,比如說用-150deg做30度的折角。...

鐵人賽 Modern Web DAY 25
CSS Secrets 導讀 系列 第 25

技術 Secret 20: 連接線

設計師很喜歡在排版中將文字分散對齊,如果你看設計類雜誌或書籍就會發現到處都是。但是在網頁上,分散對齊卻很少用到,甚至連設計師們也少使用,為什麼呢?即使在CSS...

鐵人賽 Modern Web DAY 24
CSS Secrets 導讀 系列 第 24

技術 Secret 19: 折角效果

折角是一個很普遍的設計技巧 有許多有用的的CSS方法能實現這個效果,最早在2010年就有了,它的原理是用偽元素做二個三角形,一個跟背景色一樣,假裝是被折去的角,...

鐵人賽 Modern Web DAY 23
CSS Secrets 導讀 系列 第 23

技術 Secret 18: 毛玻璃效果

毛玻璃效果是指用一層半透明的色片覆蓋複雜的背景,讓在毛玻璃前面的文字能容易閱讀。會這麼做是因為在背景裡有些有趣的地方,我們希望保留給使用者看得見,同時也要讓在前...

鐵人賽 Modern Web DAY 22
CSS Secrets 導讀 系列 第 22

技術 Secret 17: 改變色調

當你有一些形式各異的照片,卻要讓它們具有視覺上的一致性,一個常用且優雅的做法是先將照片灰階化,再加上同一種色調。在網頁設計上,會先在照片加上這種效果,然後在ho...

鐵人賽 Modern Web DAY 21
CSS Secrets 導讀 系列 第 21

技術 Secret 16: 異常的陰影

box-shadow在可使用border-radius的元素上,能產生很好的陰影效果。不過當用在偽元素或者其他透明的圖案上時就不管用了,因為box-shadow...

鐵人賽 Modern Web DAY 20
CSS Secrets 導讀 系列 第 20

技術 Secret 15: 單邊陰影

大部分的人用三個長度值和一個顏色值來做CSS陰影 box-shadow: 2px 3px 4px rgba(0,0,0,.5); 這個樣式實際上包含下面的步驟...

鐵人賽 Modern Web DAY 19
CSS Secrets 導讀 系列 第 19

技術 Secret 14: 簡單的圓餅圖 (SVG)

SVG讓許多圖像的工作變簡單,製作圓餅圖也不例外。然而與其用路徑畫圓餅圖,我們要用一個小技巧。 先從一個圓形開始: <svg width="10...

鐵人賽 Modern Web DAY 18
CSS Secrets 導讀 系列 第 18

技術 Secret 14: 簡單的圓餅圖 (CSS transforms)

圓餅圖,即使是只有二種顏色的簡單圖案,在CSS也不是容易做得到。 常用的做法包括用繪圖軟體事先製作許多圖案給不同的值使用,或者用大型的JavaScript函式庫...

鐵人賽 Modern Web DAY 17
CSS Secrets 導讀 系列 第 17

技術 Secret 13: 梯形標籤

梯形和平行四邊形的差別是,它只有二個邊是平行的,另外二個邊可以是任何角度。以前這個形狀是非常難用CSS做出來,雖然它是一種常見的形狀,尤其用在模仿標籤的樣子。如...

鐵人賽 Modern Web DAY 16
CSS Secrets 導讀 系列 第 16

技術 Secret 12: 截角效果 (clip-path)

雖然border-image的做法很簡潔也很 DRY,仍然有它的限制,比如說我們還是需要有個純色的背景。 還記得在鑽石形圖片中用過的clip-path嗎?CSS...

鐵人賽 Modern Web DAY 15
CSS Secrets 導讀 系列 第 15

技術 Secret 12: 截角效果 (inline SVG)

雖然 CSS gradient 的方法可以用,不過它的程式碼是冗長的,需求變更時要做多個地方調整,好在我們還有其他的方法,其中一種是用border-image配...

鐵人賽 Modern Web DAY 14
CSS Secrets 導讀 系列 第 14

技術 Secret 12: 截角效果 (CSS gradient)

裁切的截角不只是用來收集折價券省錢,也是印刷和網頁上常見的設計圖案。它的表現方式是以45度角裁去元素一個或以上的角落。尤其當近年扁平化設計(flat desig...

鐵人賽 Modern Web DAY 13
CSS Secrets 導讀 系列 第 13

技術 Secret 11: 鑽石形圖片

鑽石形的圖片是常見的一種視覺設計,但是用 CSS 不容易做到。事實上,一直到最近,它還是不可能實現的效果。以前網頁設計師要實現鑽石形圖片,必須從原始圖片下手,先...

鐵人賽 Modern Web DAY 12
CSS Secrets 導讀 系列 第 12

技術 Secret 10: 平行四邊形

平行四邊形使用在網頁設計的時候,是為了讓頁面看起來更活潑更有動感。 首先用skew()來製作一個平行四邊形的按鈕。 <a href="#&quo...

鐵人賽 Modern Web DAY 11
CSS Secrets 導讀 系列 第 11

技術 Secret 9: 靈活的橢圓形

自從border-radius成為標準後,開發者們終於不必再用圖片製作圓角的圖案。想要一個正圓形,只要將border-radius設為正方形邊寬的一半就可以了。...

鐵人賽 Modern Web DAY 8
CSS Secrets 導讀 系列 第 8

技術 Secret 6: 更多的背景圖案

世界上並非只有條紋還有許多種圖案像是網格、點點、棋盤等等。好消息是 CSS gradients 幾乎做得到! 上一篇文章我們只使用了一個 linear-gra...

鐵人賽 Modern Web DAY 7
CSS Secrets 導讀 系列 第 7

技術 Secret 5: 條紋背景

條紋是種常見的 pattern. 網頁設計要製作條紋最簡單的方法是用圖片做背景,不過這樣一來修改時就需要麻煩設計師出手。有些人可能會用 SVG,但是這樣還是需要...

鐵人賽 Modern Web DAY 6
CSS Secrets 導讀 系列 第 6

技術 Secret 4: 內部圓角

有時我們會需要讓邊界裡面是圓角,但是外面還是維持直角。 最直覺的做法是用二個 <div> 一個做內框一個做外框,外框的背景顏色是邊界的顏色。 &l...

鐵人賽 Modern Web DAY 5
CSS Secrets 導讀 系列 第 5

技術 Secret 3: 靈活的背景定位

背景裡如果有單一圖片或是標誌時,我們常常會要固定放在背景的某個角落,此時需要用到background-position 去指定背景圖的位置。 backgroun...

鐵人賽 Modern Web DAY 4
CSS Secrets 導讀 系列 第 4

技術 Secret 2: 多重邊界

在 Backgrounds & Border Level 3 當時還在草稿階段時,WG的成員有討論過多重邊界的可能性,就像現在 background 可...

鐵人賽 Modern Web DAY 3
CSS Secrets 導讀 系列 第 3

技術 Secret 1: 半透明的邊界

為元素加上 border 算是CSS新手的問題 border: 10px; 給元素來個半透明的顏色,稍微難一些。可以用 rgba() 或是 hsla(),把he...

鐵人賽 Modern Web DAY 2
CSS Secrets 導讀 系列 第 2

技術 [前言2] 那些年我們一起錯過的 CSS 編碼技巧

Minimize code duplication 軟體開發最重要的二個原則是 DRY 和可維護性,同時也適用在 CSS可維護性的程式碼以實際狀況來說,是在變更...

鐵人賽 Modern Web DAY 1
CSS Secrets 導讀 系列 第 1

技術 [前言1] CSS 標準以及它們的產地

CSS 標準是怎麼定的? 事實上 W3C 不是制定標準的單位,CSS Working Group 才是制定標準的單位。CSS WG 大部分成員來自瀏覽器廠商因此...